<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气查询系统</title>
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        html {
            cursor: auto;
        }

        .draw {
            position: fixed;
            width: 1px;
            line-height: 1px;
            pointer-events: none;
        }

        @keyframes floatOne {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translate3D(0, -20px, 0) scale(5) rotate(45deg);
            }
        }

        body {
            background: green;
        }

        #box {
            background: black;
            color: aliceblue;
            border: 15px darkgreen solid;
            border-radius: 15px;

        }

        li {
            padding-top: 10px;
            margin: 14px;
            list-style: none;
        }

        #tomorrow_tq ul {
            margin-left: 10px;
            border: deeppink 2px solid;
            border-radius: 5px;
            float: left;
            transition: all 0.8s ease-in-out 0s;
        }

        #tomorrow_tq ul:hover {
            border: white 10px solid;
            border-radius: 15px;
            background-color: rgba(106, 14, 118, 0.4);
        }
    </style>
</head>
<body>
<canvas id="c"></canvas>
<script>
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    // ctx.fillRect(0,0,100,100);
    // a,b,c,d分别代表x方向偏移,y方向偏移,宽，高
    var string1 = "叫我洪哥哥！";
    string1.split("");
    var fontsize = 60;
    columns = c.width / fontsize;
    var drop = [];
    for (var x = 0; x < columns; x++) {
        drop[x] = 0;
    }

    function drap() {
        ctx.fillStyle = "rgba(0,0,0,0.07)";
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.fillStyle = "#0F0";
        ctx.font = fontsize + "px arial";
        for (var i = 0; i < drop.length; i++) {
            var text1 = string1[Math.floor(Math.random() * string1.length)];
            ctx.fillText(text1, i * fontsize, drop[i] * fontsize);
            drop[i]++;
            if (drop[i] * fontsize > c.height && Math.random() > 0.9) {//90%的几率掉落
                drop[i] = 0;
            }
        }
    }

    setInterval(drap, 60);
</script>
<embed src="http://music.taihe.com/song/611238837" hidden="true" autostart="true" loop="true">
<div id="box">
    <div id="query">
        <h1 style="color:white;margin:0 auto;">天气查询</h1>
        <input id="city" type="text"/>
        <button id="submit">提交</button>
    </div>
    <div id="empty_box">
        <div id="today_tq"></div>
        <div id="tomorrow_tq"><h3 style="color:white;margin:0 auto;">后三日天气</h3></div>
    </div>

</div>
</body>
<script>
    var H = 0;

    $(document).bind('mousemove touchmove', function (e) {
        e.preventDefault();
        var drawSize = 10;
        var drawType = '○';
        var floatType = 'floatOne';
        var xPos = e.originalEvent.pageX;
        var yPos = e.originalEvent.pageY;

        $('body').append('<div class="draw" style=" font-size:' + drawSize + 'px;left:' + xPos + 'px;top:' + yPos + 'px;-webkit-animation:' + floatType + ' .9s 1;-moz-animation:' + floatType + ' .9s 1;color:#33a0fc;">' + drawType + '</div>');

        $('.draw').each(function () {
            var div = $(this);
            setTimeout(function () {
                $(div).remove();
            }, 800);
        });
    });
    $(document).ready(function () {
        $.ajax({
            url: "http://47.98.53.254:8091/select/",
            type: 'GET', //GET
            async: false, //或false,是否异步
            timeout: 5000, //超时时间    //返回的数据格式：json/xml/html/script/jsonp/text
            dataType: 'json',
            success: function (data) {
                console.log(data.data);
                var place = data.data.city;
                var today = data.data.today;
                var htmlToday = '<div><h3>' + place + '今日天气</h3><ul><li><span></span>日期：<span>' + today.date + '</span></li><li><span></span>白天：<span><img src="' + today.dayPictureUrl + '"></span></li><li><span></span>夜间：<span><img src="' + today.nightPictureUrl + '"</span></li><li><span></span>温度：<span>' + today.temperature + '</span></li><li><span></span>天气：<span>' + today.weather + '</span></li><li><span></span>风向：<span>' + today.wind + '</span></li></ul></div>'
                $("#today_tq").append(htmlToday)
                var list_tq = data.data.list;
                for (var i = 0; i < list_tq.length; i++) {
                    var htmlTomorrow = '<div><ul><li><span></span>日期：<span>' + list_tq[i].date + '</span></li><li><span></span>白天：<span><img src="' + list_tq[i].dayPictureUrl + '"></span></li><li><span></span>夜间：<span><img src="' + list_tq[i].nightPictureUrl + '"</span></li><li><span></span>温度：<span>' + list_tq[i].temperature + '</span></li><li><span></span>天气：<span>' + list_tq[i].weather + '</span></li><li><span></span>风向：<span>' + list_tq[i].wind + '</span></li></ul></div>'
                    $("#tomorrow_tq").append(htmlTomorrow)
                }

                console.log(place, today)
            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete: function () {
                console.log('结束')
            }
        });
        $("#submit").click(function () {
            $("#today_tq").empty();
            $("#tomorrow_tq").empty();
            $.ajax({
                url: "http://47.98.53.254:8091/select/",
                type: 'POST', //GET
                async: false, //或false,是否异步
                timeout: 5000, //超时时间    //返回的数据格式：json/xml/html/script/jsonp/text
                dataType: 'json',
                data: {
                    'city': $("#city").val()
                },
                success: function (data) {
                    //
                    console.log(data.data);
                    var place = data.data.city
                    var today = data.data.today
                    var htmlToday = '<div><h3>' + place + '今日天气</h3><ul><li><span></span>日期：<span>' + today.date + '</span></li><li><span></span>白天：<span><img src="' + today.dayPictureUrl + '"></span></li><li><span></span>夜间：<span><img src="' + today.nightPictureUrl + '"</span></li><li><span></span>温度：<span>' + today.temperature + '</span></li><li><span></span>天气：<span>' + today.weather + '</span></li><li><span></span>风向：<span>' + today.wind + '</span></li></ul></div>'
                    $("#today_tq").append(htmlToday)
                    var list_tq = data.data.list
                    for (var i = 0; i < list_tq.length; i++) {
                        var htmlTomorrow = '<div><ul><li><span></span>日期：<span>' + list_tq[i].date + '</span></li><li><span></span>白天：<span><img src="' + list_tq[i].dayPictureUrl + '"></span></li><li><span></span>夜间：<span><img src="' + list_tq[i].nightPictureUrl + '"</span></li><li><span></span>温度：<span>' + list_tq[i].temperature + '</span></li><li><span></span>天气：<span>' + list_tq[i].weather + '</span></li><li><span></span>风向：<span>' + list_tq[i].wind + '</span></li></ul></div>'
                        $("#tomorrow_tq").append(htmlTomorrow)
                    }

                },
                error: function (xhr, textStatus) {
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
                complete: function () {
                    console.log('结束')
                }
            });
        });

    });
</script>
</html>